<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <script>
        const xml = new XMLHttpRequest()
        xml.open('get', 'AJAX\ajax基础数据.json', true)
        //  第一个 get或post
        //  第二个 请求地址
        //  第三个 参数是否异步
        // 如果用的get以外的请求方式就添加
        // xml.setRequestHeader('content-type','application/json') 然后在send里面添加json.stringify({数据 })
        xml.send()

        //监听
        // xml.onreadystatechange=function(){

        //     // 0 表示初始化未完成 也就是open还没执行
        //     // 1 表示配置信息完成 也就是open执行完之后
        //     // 2 表示send方法执行完
        //     // 3 正在解析响应内容
        //     // 4 表示响应内容解析完 客户端可以使用了
        //     console.log(xml.readyState);

        //     if(xml.readyState===4){
        //         if(/^2\d{2}$/.test(xml.status)){
        //             console.log(JSON.parse(xml.responseText));
        //         }else{
        //             console.log(xml.responseText);
        //         }
        //         console.log('right');
        //     }
        // }
        xml.onload = function () {
            if (/^2\d{2}$/.test(xml.status)) {
                console.log(JSON.parse(xml.responseText));
            } else {
                console.log(xml.responseText);
            }
        }


        //  封装axios
       function Myaxios(config) {
            return new Promise((resolve, reject) => {
                const xml = new XMLHttpRequest()
                xml.open(confirm.mthod || 'get', confirm.url)
                xml.onloadend = () => {
                            // resolve('成功')
                            reject(new Error('失败'))
                    
                }
                xml.send()
            })
        }
        Myaxios({
            url:'AJAX\ajax基础数据.json'
        }).then((res)=>{
               console.log(res);
        }).catch((error)=>{
                console.log(error);
        })

        // 回调地狱？？?
        // 就是嵌套回调函数
        // axios(()=>{
        //    .....
        //    axios(()=>{
        //     .....
        //     axios(()=>{

        //     })
        //    })
        // })
        // 可读性差
        // 异常捕获困难
        // 耦合性差
    </script>
</body>

</html>